<template>
<!--pages/orderList/orderList.wxml-->

<view class="container">
  <view class="main">
	  <!-- <view class="total-persons fullwidth" @click="showTree">总人数：{{teamNum}}</view>
	  <view class="flex-wrap">
	  	<view class="total-persons">激活人数：{{activeNum}}</view>
		<view class="total-persons " style="color: #DBA871;">|</view>
	  	<view class="total-persons">未激活人数：{{inactivatedNum}}</view>
		<button type="default" @click="showTreeBtn()">查看</button>
	  </view> -->
	  
	  <tki-tree ref="tkitree" :selectParent="selectParent" :multiple="multiple" :range="treeList" :foldAll="flod" rangeKey="name" @confirm="treeConfirm"
	   @cancel="treeCancel"></tki-tree>
    <view class="empty" v-if="list.length==0">
      暂无数据
    </view>
    <!-- 订单列表 -->
    <block v-for="(item, index) in list" :key="index">
      <view class="prod-item">
		  <!-- <image src="../../../static/img/logo32X32.png" mode="" class="logo1"></image> -->
		<view class="prod-item-box">
			<view class="order-num">
			  <view class="phone">{{item.phone}}</view>
			  <view v-if="item.state==0" class="level">非会员</view>
			  <view v-if="item.state==1" class="level">会员</view>
			  <view v-if="item.state==2" class="level">会长</view>
			  <view v-if="item.status==1" class="level status">已激活</view>
			  <view v-if="item.status==0" class="level status">未激活</view>
			  
			</view>
			<view class="flex-wrap">
				<view class="order-num">推荐人数：{{item.tjrs}}</view>
				<view class="order-num">第{{item.sort}}直推</view>
			</view>
			<view class="order-num">注册时间：{{item.createTime}}</view>
			<view class="order-num">激活时间：{{item.activeTime}}</view>
			<!-- <button class="show-tree-btn" type="default" @click="getMallUserId(item.phone)">查看推荐人数</button> -->
		</view>
        
      </view>

    </block>


  </view>
</view>
<!-- end 订单列表 -->
</template>

<script module="wxs" lang="wxs" src="../../wxs/number.js"></script>

<script>
var http = require("../../utils/http.js");
// var config = require("../../utils/config.js");
import config from '../../../common/config.js'
import tkiTree from '../../components/tki-tree/tki-tree.vue'; 

export default {
  data() {
    return {
      list: [],
      current: 1,
      pages: 0,
      sts: 0,
	  teamNum:0,//总人数
	  activeNum:0,//激活人数
	  inactivatedNum:0,//未激活人数
	  
	  treeList: [ ],
	  multiple: false,
	  selectParent: false,
	  flod: false,
	   userId:''
    };
  },

 components: {
 	  tkiTree
 },
  props: {},

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad() {
	  this.userId = uni.getStorageSync('userid')
	  //测试
	  // this.userId = '1478751127621156866'
	  
    this.loadData()
  },


  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {},



  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {},



  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    // if (this.current < this.pages) {
    //   this.loadOrderData(this.sts, this.current + 1);
    // }
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {},
  methods: {
	  getMallUserId(phone){
	  		  console.log('电话：',phone)
	  	uni.request({
	  		url:config.mallHost+'/p/user/getIdByPhone/'+phone,
	  		method:'GET',
	  		success: (res) => {
	  			console.log('商城userid:',res)
	  			if(res&&res.statusCode == 200){
	  					let userId = res.data.userId
	  					this.loadTreeData(userId,true)
	  			}
	  			
	  		},
	  		fail: (err) => {
	  			console.log('err',err)
	  		}
	  	})
	  },
	  loadData(){
	  	console.log('userid:'+this.userId)
	  	uni.request({
	  		// url:'https://k999az04ootw.ngrok2.xiaomiqiu.cn/p/user/newUserInfo/'+this.userId,
	  		url:config.mallHost +'/p/user/getMyTeam/'+ this.userId,
	  		method:'GET',
	  		success: (res) => {
	  			console.log('我的团队：',res)
	  			this.list = res.data.teamInfoList
	  			this.teamNum = res.data.teamNum
				this.activeNum = res.data.activeNum
				this.inactivatedNum = res.data.inactivatedNum
	  		},
	  		fail: (err) => {
	  			console.log('err',err)
	  		}
	  	})
	  },
	  loadTreeData(userId,showTree){
	  	console.log('userid:'+ userId)
	  	uni.request({
	  		url:config.mallHost +'/p/user/getTreeData/'+ userId,
	  		method:'GET',
	  		success: (res) => {
	  			console.log('我的团队树形数据：',res)
	  			this.treeList = res.data
	  				if(showTree){
	  					this.showTree()
	  				}
	  		},
	  		fail: (err) => {
	  			console.log('err',err)
	  		}
	  	})
	  },
	  
	  // 显示树形选择器
	  showTree() {
	  	this.$refs.tkitree._show();
	  },
	  showTreeBtn(){
	  		  this.loadTreeData(this.userId,true)
	  },
	  treeCancel(){
		  
	  },
	  treeConfirm(){}
	  
  }
};
</script>
<style>
@import "./orderList.css";
.prod-item {
  background-color: #fff;
  margin-top: 15rpx;
  font-size: 28rpx;
  display: flex;
  align-items: center;
}
.prod-item .order-num {
  padding: 10rpx 30rpx;
  display: flex;
  /* font-size: 28rpx; */
}
.prod-item .order-num .phone{
  font-weight: 600;
  font-size: 30upx;
}
.prod-item .order-num .level{
  background-color: #D53912;
  color: white;
  border-radius: 6upx;
  padding: 2upx 10upx;
  margin-left: 20upx;
}
.logo1{
	width: 100upx;
	height:100upx;
}
.total-persons{
	font-size: 32upx;
	height: 50upx;
	line-height: 50upx;
	text-align: center;
	margin-left: 30upx;
}
.flex-wrap{
	display: flex;
	flex-direction: row;
	align-items: center;
}
.flex-wrap button{
	height: 60upx;
	line-height: 60upx;
	background-color: #DBA871;
	color: white;
	font-size: 30upx;
}
.fullwidth{
	width: 100%;
}
.show-tree-btn{
	width: 60%;
	height: 60upx;
	font-size: 26upx;
	line-height: 60upx;
	margin: 10upx auto;
	background-color: #DBA871;
	white-space: nowrap;
}
.main{
	width: 100%;
}
</style>